<template>
  <div class="user">
    <div class="common-form">编辑转盘</div>
    <div class="product-content">
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px">
        <el-form-item label="每日次数" prop="times" :rules="[{required: true,message: ' '}]">
          <el-input type="text" v-model="form.times" placeholder="请输入每日次数" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="消耗积分" prop="points" :rules="[{required: true,message: ' '}]">
          <el-input type="text" v-model="form.points" placeholder="请输入消耗积分" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="活动状态" prop="status" :rules="[{required: true,message: ' '}]">
          <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#999999" :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="活动规则" prop="content" :rules="[{required: true,message: ' '}]">
          <el-input type="textarea" :rows="3" v-model="form.content" placeholder="请输入活动规则" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="背景图" prop="filePath">
          <el-row>
            <el-button type="primary" @click="openUpload" size="mini">选择图片</el-button>
            <div v-if="form.filePath!=''" class="img">
              <img :src="form.filePath" :width="100" :height="100" />
            </div>
          </el-row>
        </el-form-item>
        <div class="common-form">礼品设置</div>
        <el-form-item label="" v-if="tableData.length<8">
          <el-button type="primary" @click="addCoupon()">添加优惠券</el-button>
          <el-button type="primary" @click="addProduct()">添加商品</el-button>
          <el-button type="primary" @click="addPoint()">添加积分</el-button>
          <el-button type="primary" @click="addNothing()">添加空项</el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange" ref="singleTable">
            <el-table-column prop="lotteryId" label="序号" type="index">
            </el-table-column>
            <el-table-column prop="name" label="名称" :rules="[{required: true,message: ' '}]" width="180">
              <template  #default="scope">
                <el-input type="text" v-if="scope.row.type==0 || scope.row.type==3" v-model="scope.row.name" placeholder="请输入">
                </el-input>
                <span v-else>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="image" label="图片" width="80">
              <template  #default="scope">
                <img v-img-url="hasImages(scope.row.image)" alt="" :width="50" @click="changeImg(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型">
              <template  #default="scope">
                <span v-if="scope.row.type==0">无礼品</span>
                <span v-if="scope.row.type==1">优惠券</span>
                <span v-if="scope.row.type==2">积分</span>
                <span v-if="scope.row.type==3">商品</span>
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="活动库存" :rules="[{required: true,message: ' '}]">
              <template  #default="scope">
                <el-input type="number" v-model="scope.row.stock" placeholder="">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="drawNum" label="已送出">
            </el-table-column>
            <el-table-column prop="isDefault" label="是否默认" :rules="[{required: true,message: ' '}]">
              <template  #default="scope">
                <el-switch @change="changeSwitch(scope.row)" :value="scope.row.isDefault==1" active-color="#13ce66"
                  inactive-color="#999999">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="isPlay" label="是否播报">
              <!-- 0 不播报 1 播报 -->
              <template  #default="scope">
                <el-switch
                    v-model="scope.row.isPlay"
                    active-color="#13ce66"
                    :active-value="1"
                    :inactive-value="0"
                    inactive-color="#999999">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template  #default="scope">
                <el-button type="text" size="small" @click='delcoupon(scope.row)'> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="info" @click="gotoBack">返回</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </div>
    <el-dialog title="添加积分" v-model="isPoint">
      <el-input v-model="point" autocomplete="off"></el-input>
      <template #footer>
      <div  class="dialog-footer">
        <el-button @click="closePointFunc(false)">取 消</el-button>
        <el-button type="primary" @click="closePointFunc(true)">确 定</el-button>
      </div>
      </template>
    </el-dialog>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
    <!--选择优惠券-->
    <GetCoupon v-if="open_add" :open_add="open_add" @closeDialog="closeProductDialogFunc($event)">选择优惠券弹出层</GetCoupon>
    <!--选择商品-->
    <Product :isProduct="isProduct" :excludeIds="excludeIds" :islist="false" @closeDialog="closeProductFunc"></Product>
  </div>
</template>
<script>
  import UserApi from '@/api/user.js';
  import LotteryApi from '@/api/lottery.js';
  import GetCoupon from '@/components/coupon/GetCoupon.vue';
  import Product from '@/components/product/Product.vue';
  import Upload from '@/components/file/Upload.vue';
  import {
    formatModel
  } from '@/utils/base.js';
  export default {
    components: {
      /*选择优惠券件*/
      GetCoupon,
      Product,
      Upload
    },
    data() {
      return {
        form: {
          prize: [],
          points: 0,
          isTimes: 0,
          couponNum: 1,
          times: '',
          name: '',
          lotteryId: 0,
          imageId: '',
          content: '',
          filePath: '',
          status: 0
        },
        filePath: '',
        Grade: {},
        tableData: [],
        loading: false,
        open_add: false,
        /*是否打开选择商品*/
        isProduct: false,
        excludeIds: [],
        spec_type: 10,
        /*是否打开图片选择*/
        isupload: false,
        formRules: {
          imageId: [{
            required: true,
            message: '请上传背景图',
            trigger: 'blur'
          }],
        },
        /*左边长度*/
        formLabelWidth: '120px',
        isPoint: false,
        point: '',
        isNothing: false,
        isLottery: -1,
        prizeIds: []
      };
    },
    created() {
      /*获取等级*/
      this.getGradeList();
      /*获取数据*/
      this.getData();
    },
    methods: {
      hasImages(e) {
        if (e) {
          return e;
        } else {
          return '';
        }
      },
      /*添加优惠券*/
      addCoupon() {

        this.open_add = true;
      },
      /*关闭优惠券*/
      closeProductDialogFunc(e) {
        let self = this;
        self.open_add = e.openDialog;
        if (e.type == 'success') {
          let params = {
            prizeId: 0,
            awardId: e.params.couponId,
            name: e.params.name,
            stock: 1,
            type: 1,
            image: '',
            points: 0,
            isDefault: 0
          }
          self.tableData.push(params);
        }
      },

      /*添加商品*/
      addProduct() {
        let params = {
          prizeId: 0,
          awardId: 0,
          name: '请输入商品名称',
          stock: 1,
          type: 3,
          image: '',
          points: 0,
          isDefault: 0
        }
        this.tableData.push(params);
      },
      /*关闭商品*/
      closeProductFunc(e) {

      },
      addPoint() {
        this.isPoint = true;
      },
      closePointFunc(e) {
        let self = this;
        self.isPoint = e.openDialog;
        let points = this.point;
        if (e) {
          let params = {
            prizeId: 0,
            awardId: 0,
            name: '积分',
            points: 0,
            stock: 1,
            type: 2,
            image: '',
            isDefault: 0
          }
          params.points = points;
          params.name = points + '积分';
          self.tableData.push(params);
        }
      },
      addNothing() {
        let self = this;
        let params = {
          prizeId: 0,
          awardId: 0,
          name: '祝你好运',
          stock: 1,
          type: 0,
          image: '',
          points: 0,
          isDefault: 0
        }
        self.tableData.push(params);
      },
      /*获取等级*/
      getGradeList() {
        let self = this;
        let Params = {};
        Params.page = self.curPage;
        Params.list_rows = self.pageSize;
        UserApi.gradelist(Params, true)
          .then(data => {
            self.Grade = data.data.list.data;

          }).catch(error => {

          });
      },
      /*获取数据*/
      getData() {
        let self = this;
        LotteryApi.getData(true).then(res => {
          self.form = formatModel(self.form, res.data);
          if (self.form.prize != null) {
            self.tableData = self.form.prize;
            self.prizeIds = [];
          }
        }).catch(error => {});
      },
      delProduct(item) {
        let self = this;
        let n = self.prodcutData.indexOf(item);
        self.prodcutData.splice(n, 1);
        self.form.product.splice(n, 1);
      },
      delcoupon(item) {
        let self = this;
        let n = self.tableData.indexOf(item);
        if (item.prizeId) {
          self.prizeIds = [...self.prizeIds, item.prizeId];
        }
        self.tableData.splice(n, 1);
      },
      /*提交表单*/
      onSubmit() {
        let self = this;
        let form = self.form;
        if (self.tableData.length != 8) {
          ElMessage.error('请设置8项礼品信息');
          return
        }
        let flag = false;
        self.tableData.forEach((item, index) => {
          if (item.isDefault == 1) {
            flag = true;
            return
          }
        })
        if (!flag) {
          ElMessage.error('请设置默认项');
          return
        }
        form.prize = self.tableData;
        if (self.prizeIds.length > 0) {
          form.prizeIds = self.prizeIds;
        } else {
          form.prizeIds = [];
        }
        self.$refs.form.validate((valid) => {
          if (valid) {
            self.loading = true;
            LotteryApi.EditLottery(form, true).then(data => {
                self.loading = false;
                if (data.code == 1) {
                  ElMessage({
                    message: data.msg,
                    type: 'success'
                  });
                  self.getData();
                } else {
                  self.loading = false;
                }
              })
              .catch(error => {
                self.loading = false;
              });
          }
        });

      },
      changeImg(e) {
        this.isLottery = this.tableData.indexOf(e);
        this.isupload = true;
      },
      /*上传*/
      openUpload(e) {
        this.type = e;
        this.isupload = true;
      },
      /*获取图片*/
      returnImgsFunc(e) {

        if (e != null && e.length > 0) {
          if (this.isLottery != -1) {
          this.tableData[this.isLottery]['image']=e[0].filePath
          } else {
            this.form.filePath = e[0].filePath;
            this.form.imageId = e[0].fileId;
          }

        }
        this.isLottery = -1;
        this.isupload = false;
      },
      /*返回上一页面*/
      gotoBack() {
        this.$router.back(-1);
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      changeSwitch(row) {
        this.tableData.forEach((item, index) => {
          item.isDefault = 0;
        })
        row.isDefault = 1
      }
    }
  };
</script>
